<template>
<div class="el-container">

    <!-- 页面头部 -->
    <div class="head">
      <div class="headLeft">
        <el-button size="mini" @click="$router.push('/Home')">知识图谱系统</el-button>
      </div>
      <div v-if="isLogined()" class="headRight">
        <span>{{username}}</span>
        <el-button type="info" size="mini" @click="logout()">退出</el-button>
      </div>
      <div v-else class="headRight">
        <el-button size="mini" @click="loginDialog = true">登录</el-button>
        <el-button size="mini" @click="registerDialog = true">注册</el-button>
      </div>
    </div>

    <!-- 搜索框及搜索结果 -->
    <div class="main">
      <div class="search_box flex_box">
        <el-input v-model="search.knowledgeKeyword" placeholder="请输入内容"></el-input>
        <el-button class="search_button" icon="el-icon-search" type="success" size="mini" @click="reloadSeach()"></el-button>
      </div>
      <div class="search_box searched" v-if="nodes.length">
        <el-row v-for="item in nodes" :key="item.id">
          <el-button type="text" @click="reloadCanvas(item.classId)">{{item.knowledgeName}}</el-button>
          <p class="tags">{{item.knowledgeTag.replace(/\|/g,'   ')}}</p>
          <p v-if="item.knowledgeContent!=='null'">{{item.knowledgeContent}}</p>
        </el-row>
      </div>
      <div class="search_box searched" v-else>
        <p>没搜索到对应的知识</p>
      </div>
    </div>

    <!-- 用户登录对话框 -->
    <el-dialog title="用户登录" :visible.sync="loginDialog" width="50%" @close="loginDialogClose()" :close-on-click-modal="false">
      <el-form :model="loginUser" label-width="140px">
        <el-form-item label="用户账号">
          <el-input v-model="loginUser.code"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input v-model="loginUser.password" show-password></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="loginDialog = false">取 消</el-button>
          <el-button type="primary" @click="loginClicked ()">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 用户注册对话框 -->
    <el-dialog title="用户注册" :visible.sync="registerDialog" width="50%" @close="registerDialogClose()" :close-on-click-modal="false">
      <el-form :model="registerUser" label-width="140px">
        <el-form-item label="用户名">
          <el-input v-model="registerUser.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input v-model="registerUser.password" show-password></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="registerDialog = false">取 消</el-button>
          <el-button type="primary" @click="registerClicked ()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import '../assets/js/background/ribbon.js'
import '../assets/js/background/vue.js'
import { login, register, queryNode } from '@/assets/api.js'
export default {
  name: 'Seach',
  data () {
    return {
      // 按关键字查询知识的表单
      search: {
        knowledgeKeyword: '',
        startPage: 0,
        endPage: 2000
      },
      // 标签列表
      hot_tag: [],
      // 是否显示注册对话框
      registerDialog: false,
      // 是否显示登录对话框
      loginDialog: false,
      // 用户登录信息
      loginUser: {
        code: 'admin',
        password: '123456'
      },
      // 用户注册信息
      registerUser: {
        username: '',
        password: ''
      },
      // 存储查询成功返回的知识列表
      nodes: []
    }
  },
  methods: {
    // 用户登录操作
    async loginClicked () {
      const {data: res} = await login(this.loginUser)
      if (res.code === 200) {
        this.$message.success('登录成功')
        window.sessionStorage.setItem('token', res.msg.slice(res.msg.indexOf('token:') + 6))
        window.sessionStorage.setItem('id', res.data.id)
        window.sessionStorage.setItem('admin', res.data.admin)
        window.sessionStorage.setItem('username', res.data.username)
        window.sessionStorage.setItem('code', res.data.code)
        window.sessionStorage.setItem('img', res.data.img)
        window.location.reload()
      } else {
        this.$message.error(res.msg)
      }
      this.loginDialog = false
    },
    // 用户对话框关闭重置用户登录信息
    loginDialogClose () {
      this.loginUser.code = 'admin'
      this.loginUser.password = '123456'
    },
    // 进行用户注册操作
    async registerClicked () {
      const {data: res} = await register(this.registerUser)
      if (res.code === 200) {
        this.$message.success(res.msg)
      } else {
        this.$message.error(res.msg)
      }
      this.registerDialog = false
    },
    // 用户注册对话框关闭重置用户注册信息
    registerDialogClose () {
      this.registerUser.username = ''
      this.registerUser.password = ''
    },
    // 用户是否登录
    isLogined () {
      if (window.sessionStorage.token) {
        return true
      } else {
        return false
      }
    },
    // 用户退出
    logout () {
      this.$confirm('是否确认退出用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.sessionStorage.clear()
        window.location.reload()
      }).catch(() => {
      })
    },
    // 按关键词查找知识
    async getNodesBySearch () {
      const {data: res} = await queryNode(this.search)
      if (res.code === 200) {
        this.nodes = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    // 让页面进行查询
    reloadSeach () {
      this.$router.push('/Seach/' + this.search.knowledgeKeyword)
      this.getNodesBySearch()
    },
    // 让页面跳转到对应的知识图谱中
    reloadCanvas (classId) {
      this.$router.push('/Canvas/' + classId)
    }
  },
  created () {
    this.search.knowledgeKeyword = this.$route.params.content
    this.getNodesBySearch()
  },
  computed: {
    // 返回用户名
    username () {
      return window.sessionStorage.username
    }
  }
}
</script>

<style scoped>
.main{
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
  }
  .flex_box{
    display: flex;
    flex-direction: row;
  }
  .search_box{
    width: 40vw;
  }
  .search_button{
    margin-left: 10px;
  }
  .searched {
    margin-top: 15px;
    overflow: scroll;
    max-height: 600px;
  }
  .searched .el-button {
    font-size: 20px !important;
  }
  .head .headLeft {
    position: absolute;
    left: 10px;
  }
  .head .headRight {
    position: absolute;
    right: 0;
  }
  .head .el-button {
    margin-top: 5px;
    margin-right: 5px;
    margin-left: 0;
  }
  p {
    margin: 4px;
    white-space: pre-wrap;
  }
  .tags {
    color: gray;
    font-size: 14px;
  }
</style>
